revision:
<div class="spec grid">
<p class="local" id="date"></p>
<p class="local" id="date-1"></p>
<p class="local" id="date-2"></p>
<p class="local" id="date-3"></p>
<p class="local" id="date-4"></p>
<p class="local" id="date-5"></p>
<p class="local" id="date-6"></p>
<p class="local" id="date-7"></p>
<p class="local" id="date-8"></p>
<p class="local" id="date-9"></p>
<p class="local" id="date-10"></p>
<p class="local" id="date-11"></p>
<p class="local" id="date-12"></p>
<p class="local" id="date-13"></p>
<p class="local" id="date-14"></p>
</div>
<style>
.local{position: relative; width: 20vw; height: 2vw; border: 0.2vw solid darkgrey;
background-color: lightgrey; color: darkblue; padding:1vw; }
</style>
<script>
const date = new Date();
document.getElementById("date").innerHTML = "setting 0 - today (en-US) : " +
date.toLocaleDateString('en-US');
document.getElementById("date-1").innerHTML = "setting 1 - today (en-UK) : " +
date.toLocaleDateString('en-UK');
const dateOptions = {
weekday:'long',
year: 'numeric',
month: 'long',
day: 'numeric',
};
document.getElementById("date-2").innerHTML = "setting 2 - today is " +
date.toLocaleDateString('en-US', dateOptions);
document.getElementById("date-3").innerHTML = "setting 3 (month, short) - " +
(date.toLocaleDateString('en-US', {month:'short', day: 'numeric'}));
document.getElementById("date-4").innerHTML = "setting 4 (month, long) - " +
(date.toLocaleDateString('fr-FR', {month:'long'}));
document.getElementById("date-5").innerHTML = "setting 5 (UK) - " +
(date.toLocaleDateString('en-GB'));
document.getElementById("date-6").innerHTML = "setting 6 (Korea)- " +
(date.toLocaleDateString('ko-KR'));
document.getElementById("date-7").innerHTML = "setting 7 (Arabia)- " +
(date.toLocaleDateString('ar-EG'));
document.getElementById("date-8").innerHTML = "setting 8 (China) - " +
(date.toLocaleDateString('cn-CN'));
const timeOptions = {
hour12: true,
hour: 'numeric',
minute: '2-digit',
second: '2-digit',
};
document.getElementById("date-9").innerHTML = "setting 9 (local time settings)- " +
(date.toLocaleTimeString('cn-CN', timeOptions));
const timeOptions_2 = {
hour12: false,
hour: 'numeric',
minute: '2-digit',
second: '2-digit',
};
document.getElementById("date-10").innerHTML = "setting 10 (US time settings) - " +
(date.toLocaleTimeString('en-US', timeOptions_2));
document.getElementById("date-11").innerHTML = "setting 11 (Los Angeles) - " +
(date.toLocaleTimeString('en-US', {timezone: "America/Los_Angeles",}));
document.getElementById("date-12").innerHTML = "setting 12 (US, month short) - " +
(date.toLocaleTimeString('en-US', {month: 'short'}));
document.getElementById("date-13").innerHTML = "setting 13 (US, 2-digit hour) - " +
(date.toLocaleTimeString('en-US', {hour: '2-digit'}));
document.getElementById("date-14").innerHTML = "setting 14 (US, all ) - " +
(date.toLocaleTimeString('en-US', {...timeOptions, ...dateOptions}));
</script>
code:
<div>
<div class="spec" id="now"></div>
<div class="spec" id="now-A"></div>
<div class="spec" id="now-B"></div>
</div>
<style>
#now, #now-A, #now-B{position: relative; width: 30vw; height: 2vw; color: darkblue;
background-color: lightgrey; padding: 1vw; border: 0.2vw solid darkgrey;}
</style>
<script>
let now = new Date();
document.getElementById("now").innerHTML = "it is now: " + now;
const nu = new Date();
document.getElementById("now-A").innerHTML = "it is now: " + nu.getHours();
document.getElementById("now-B").innerHTML = "it is now UTC: " + nu.getUTCHours();
</script>
code:
<div id="bar"></div>
<style>
#bar{position: relative; width: 30vw; height: 2vw; color: darkblue; background-color: lightgrey; padding: 1vw; border: 0.2vw solid darkgrey;}
</style>
<script>
$(document).ready(function(){
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
//decides if am or pm
var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
if (minutes < 10)
minutes = "0" + minutes
$('#bar').html("it is now " + hours + ":" + minutes + " " + suffix);
});
</script>
code:
<div>
<h3>using the date object</h3>
<p id="current"></p>
</div>
<style>
#current{position: relative; width: 30vw; height: 2vw; color: darkblue; background-color: lightgrey;
padding: 1vw; border: 0.2vw solid darkgrey;}
</style>
<script>
let currentTime = new Date();
document.getElementById("current").innerHTML = currentTime;
console.log(currentTime);
</script>
code:
<div>
<h3>extracting time components</h3>
<p id="current-1"></p>
</div>
<style>
#current-1{position: relative; width: 30vw; height: 2vw; color: darkblue; background-color: lightgrey;
padding: 1vw; border: 0.2vw solid darkgrey;}
</style>
<script>
let now_1 = new Date();
let hours = now_1.getHours();
let minutes = now_1.getMinutes();
let seconds = now_1.getSeconds();
document.getElementById("current-1").innerHTML = `current time: ${hours} : ${minutes} : ${seconds}`;
console.log(`Current Time: ${hours}:${minutes}:${seconds}`);
</script>
code:
<div>
<h3>formatting the time</h3>
<p id="current-2"></p>
</div>
<style>
#current-2{position: relative; width: 30vw; height: 2vw; color: darkblue; background-color: lightgrey;
padding: 1vw; border: 0.2vw solid darkgrey;}
</style>
<script>
function formatTime(number) {
return number < 10 ? '0' + number : number;
}
let now_2 = new Date();
let hours_2 = formatTime(now.getHours());
let minutes_2 = formatTime(now.getMinutes());
let seconds_2 = formatTime(now.getSeconds());
document.getElementById("current-2").innerHTML = `current time: ${hours} : ${minutes} : ${seconds}`;
console.log(`Current Time: ${hours}:${minutes}:${seconds}`);
</script>
code:
<div>
<h3>using toLocaleString()</h3>
<p id="current-3"></p>
</div>
<style>
#current-3{position: relative; width: 30vw; height: 2vw; color: darkblue; background-color: lightgrey;
padding: 1vw; border: 0.2vw solid darkgrey;}
</style>
<script>
let now_3 = new Date();
let currentTime_3 = now_3.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
document.getElementById("current-3").innerHTML = `current time: ${currentTime_3}`;
console.log(`Current Time: ${currentTime}`);
</script>